<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/jquery-2.1.1.min.js"></script>
    <script src="/js/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <link rel="stylesheet" href="/js/bootstrap-3.3.7-dist/css/bootstrap.css">
    <script src="/js/bootstrap-table/bootstrap-table.js"></script>
    <link rel="stylesheet" href="/js/bootstrap-table/bootstrap-table.css">
    <script src="/js/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
    <script src="/js/bootstrap-bootbox/bootbox.js"></script>
    <script src="/layer/layer.js"></script>
    <style type="text/css">
        #download {
            position: relative;
            display: inline-block;
            border: 1px solid #99D3F5;
            border-radius: 4px;
            padding: 7px 7px;
            color: #1E88C7;
            text-decoration: none;
            text-indent: 0;
            line-height: 15px;
        }
        #download input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
        }
        #download:hover {
            background: #AADFFD;
            border-color: #78C3F3;
            color: #004974;
            text-decoration: none;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            queryUserPhone();
        })
        function queryUserPhone() {
            $("#table").bootstrapTable({
                url:'../tree/queryUserPhone',
                striped: true,  //表格显示条纹，默认为false
                toolbar:'#tb',
                pagination:true,
                pageList:[1,2,3,4,5,6,7,8,9,10],
                pageSize:3,
                checkOnSelect:false,
                sidePagination: 'server', // 设置为服务器端分页(!!!!)
                queryParams: function (params) {
                    // 请求服务器数据时发送的参数，可以在这里添加额外的查询参数，返回false则终止请求
                    return {
                        rows:params.limit, // 每页要显示的数据条数
                        page:(params.offset/params.limit)+1, // 每页显示数据的开始行号
                    }
                },
                columns:[
                    {field:'aa',title:'aa',checkbox:true,align:'center',valign:'middle'},
                    {field:'userid',title:'用户ID',align:'center',valign:'middle'},
                    {field:'username',title:'用户姓名',align:'center',valign:'middle'},
                    {field:'phone',title:'手机号',align:'center',valign:'middle'},
                    {field:'blacklist',title:'状态',align:'center',valign:'middle',formatter:function (value,row,index) {
                            return value==1 ? '黑名单' : '正常';
                        }},
                    {field:'cz',title:'操作',align:'center',valign:'middle',formatter:function (value,row,index) {
                            var content="";
                            content+="  <a href='javascript:void(0)' onclick=queryById("+row.userid+")>修改</a>";
                            content+="  <a href='javascript:void(0)' onclick=deleteUser("+row.userid+",'"+row.phone+"')>删除</a>";
                            return content;
                        }},
                ],
                onLoadSuccess: function(){
                    console.info("加载成功");
                },
                onLoadError: function(){
                    console.info("加载数据失败");
                }
            });
        }
        function deleteUser(id,phone){
            bootbox.confirm({
                title : "删除手机号",
                message: "你确定要删除手机号为"+phone+"的记录吗?",
                buttons: {
                    confirm: {
                        label: "确定"
                    },
                    cancel:{
                        label:"取消"
                    }
                },
                callback: function(result) {
                    if(result) {
                        deleteItem(id);
                    }else{
                        return;
                    }

                }
            })
        }
        //删除方法
        function deleteItem(ids){
            $.ajax({
                url:"../tree/deleteUserPhone?ids="+ids,
                type:"POST",
                success:function(){
                    $('#table').bootstrapTable('refresh');
                }
            })
        }
        function update(){
            bootbox.dialog({
                size: "big",
                title:'修改手机号',
                message:getUI("table"),
                closeButton:true,
                //className:'add-dialog',
                buttons:{
                    'success':{
                        "label" : "<i class='icon-ok'></i> 保存",
                        "className" : "btn-sm btn-success",
                        "callback" : function() {
                            $.ajax({
                                url:"../tree/updateUserInfo",
                                type:"POST",
                                data:$("#form").serialize(),
                                success:function(result){
                                    $('#table').bootstrapTable('refresh');
                                },
                                error:function(){
                                    alert("ajax访问失败了,查看控制台");
                                }
                            });
                        }
                    },
                    'cancel':{
                        "label" : "<i class='icon-info'></i> 取消",
                        "className" : "btn-sm btn-danger",
                        "callback":function(){
                        }
                    }
                }
            })	}
        function queryById(id){
            $.ajax({
                url:"../tree/queryById?id="+id,
                success:function(result){
                    update();
                    $("#phone").val(result.phone);
                    $("[name='userid']").val(result.userid);
                    $("[name='blacklist'][value="+result.blacklist+"]").prop("checked","checked");
                    $("#username").val(result.username);
                }
            });
        }
        function getUI(url){
            var content ="" ;
            $.ajax({
                url:"toView?address=/"+url,
                async:false,
                success:function(result){
                    content= result;
                },
                error:function(){
                    alert("ajax访问失败了,查看控制台");
                }
            });
            return content;
        }

        function addUser(){

            bootbox.dialog({
                size: "big",
                title:'添加黑名单',
                message:getUI("table"),
                closeButton:true,
                //className:'add-dialog',
                buttons:{
                    'success':{
                        "label" : "<i class='icon-ok'></i> 保存",
                        "className" : "btn-sm btn-success",
                        "callback" : function() {
                            $.ajax({
                                url:"../tree/addUserPhone",
                                type:"POST",
                                data:$("#form").serialize(),
                                success:function(result){
                                    $('#table').bootstrapTable('refresh');
                                },
                                error:function(){
                                    alert("ajax访问失败了,查看控制台");
                                }
                            });
                        }
                    },
                    'cancel':{
                        "label" : "<i class='icon-info'></i> 取消",
                        "className" : "btn-sm btn-danger",
                        "callback":function(){
                        }
                    }
                }
            })	}
        function daoRu() {
            $.ajax({
                url:"../tree/daoRu",
                type:"POST",
                data:{originUrl:$("#file").val()},
                success:function(result){
                    if(result==1){
                        layer.alert("导入成功",{
                            time: 1000,
                        });
                    }
                    $('#table').bootstrapTable('refresh');
                },
                error:function(){
                    alert("导入失败");
                }
            })
        }
        function daoChu() {
            var phone = $('#table').bootstrapTable('getSelections');
            console.log(phone)
            if (phone.length == 0) {
                layer.alert("请选择要导出的数据!",{
                    time: 1000,
                });
            }else{
                var ids="";
                // 定义存放id数组，前端直接往后台传入数组类型，到mybatis xml文件直接批量删除操作
                $.each(phone,function(index,obj){
                    ids+= ids==''?obj.userid:","+obj.userid;
                });
                bootbox.confirm({
                    title : "导出数据",
                    message: "你确定要导出"+phone.length+"条记录吗?",
                    buttons: {
                        confirm: {
                            label: "确定"
                        },
                        cancel:{
                            label:"取消"
                        }
                    },
                    callback: function(result) {
                        if(result) {
                            $.ajax({
                                url:'../tree/daoChu',
                                type:'post',
                                data:{ids:ids},
                                success:function(data){
                                    layer.alert("导出成功",{
                                        time: 1000,
                                    });
                                    $('#table').bootstrapTable('refresh');
                                },
                                error:function(){
                                    alert("导出失败");
                                }
                            })
                        }else{
                            return;
                        }

                    }
                })
            }
        }
    </script>
</head>
<body>
<div id="tb">


    <a href="javascript:void(0)" id="download" class="btn btn-info">导入
        <input type="file" id="file" onchange="daoRu()" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel">
    </a>
    <button onclick="daoChu()" class="btn btn-info">导出</button>
</div>
<button onclick="addUser()" class="btn btn-info">新增</button>
<table id="table"></table>
</body>
</html>